<template>
  <div class="register">
    <van-nav-bar
      left-arrow
      class="title-bar"
      title="注册账号"
      :border="false"
      @click-left="$router.go(-1)"
    />
    <van-steps class="register-steps" :active="active" active-color="#2489F2">
      <van-step>注册账号</van-step>
      <van-step>实名认证</van-step>
      <van-step>注册成功</van-step>
    </van-steps>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.name"
        name="用户名"
        label="手机号"
        center
        placeholder="请输入您的手机号作为登录密码"
        :rules="rules"
      />
      <van-field
        v-model="user.password"
        type="password"
        name="密码"
        label="密码"
        center
        placeholder="请输入登录密码"
        :rules="rules"
      />
      <van-field
        v-model="user.notarize"
        type="password"
        name="确认密码"
        label="确认密码"
        center
        placeholder="请再次确认您的登录密码"
        :rules="rules"
      />
      <van-field
        v-model="user.code"
        name="验证码"
        label="验证码"
        center
        placeholder="请输入短信验证码"
        :rules="rules"
      >
        <template #button>
          <van-button size="small" type="default">获取验证码</van-button>
        </template>
      </van-field>
      <van-checkbox
        icon-size="1.25em"
        class="check-box-size"
        v-model="checked"
        shape="square"
      >
        我已认真阅读且同意 <span class="span-color">《盛E签服务协议》</span
        ><span class="span-color">《隐私协议》</span
        ><span class="span-color">《数字证书服务协议》</span>
      </van-checkbox>
      <div class="add-btn">
        <van-button
          block
          type="info"
          native-type="submit"
          @click="$router.push('/autonym')"
          >提交</van-button
        >
      </div>
    </van-form>
    <!-- 切换 -->
    <div class="go-to-log">
      已有账号<span @click="$router.push('/')">去登录</span>
    </div>
    <!-- end -->
    <div class="register-end">copyrightc2020北京华信云盛科技有限公司</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      rules: [],
      user: {
        name: '1',
        password: '',
        notarize: '',
        code: ''
      },
      checked: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSubmit(val) {
      console.log(val)
    }
  }
}
</script>

<style scoped lang="less">
.register {
  height: 100vh;
  background-color: #f8f8f8;
  .title-bar {
    height: 128px;
    width: 100%;
    padding-top: 40px;
    box-sizing: border-box;
    /deep/.van-nav-bar__title {
      font-size: 34px;
      font-weight: bold;
    }
    /deep/.van-icon {
      font-size: 48px;
      color: #000;
    }
  }
  .register-steps {
    padding: 20px 61px;
    margin-bottom: 20px;
    /deep/.van-step__title {
      font-size: 26px;
    }
  }
  .van-form {
    .van-cell {
      height: 108px;
    }
    .van-button--default {
      border-width: 0;
      color: #4199f4;
    }
    .check-box-size {
      position: relative;
      font-size: 24px;
      padding: 24px 30px 0 72px;
      /deep/.van-icon {
        position: absolute;
        left: 40px;
        top: 24px;
      }
      .span-color {
        color: #4199f4;
      }
    }
    .add-btn {
      margin: 67px 0 28px;
      padding: 0 40px;
    }
  }
  .go-to-log {
    text-align: center;
    font-size: 26px;
    color: #a4a4a4;
    span {
      margin-left: 10px;
      color: #4199f4;
    }
  }
  .register-end {
    position: fixed;
    width: 100%;
    bottom: 31px;
    text-align: center;
    font-size: 22px;
    color: #cacaca;
  }
}
</style>
